<template>
  <div class="header">
    <h1 class="icon-l">
      <slot name="icon-l">
        <img src="@/assets/images/logo.png" alt="">
      </slot>
    </h1>
    <div class="search-container">
      <slot>
      </slot>
    </div>
    <div class="icon-r">
      <slot name="icon-r">
        <i class="iconfont icon-kefu"></i>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    return {
      
    }
  },
  computed: {},
  watch: {},
  methods: {
  },
  created () {},
  mounted () {},
  beforeCreate () {},
  beforeMount () {},
  beforeUpdate () {},
  updated () {},
  beforeDestroy () {},
  destroyed () {},
  activated () {}
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.header{
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #b0352f;
  width: 100%;
  height: 1.6rem;
  .icon-l{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8667rem;
    height: .8rem;
    color: #fff;
    img{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .search-container{
    width: 6.56rem;
    height: .8rem;
    .search-box{
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: .32rem;
      color: #ccc;
      font-size: .3733rem;
      i{
        padding: 0 .16rem;
        font-size: .4267rem;
      }
    }
  }
  .icon-r{
    color: #fff;
    .icon-kefu{
      font-size: .6933rem;
    }
  }
}
</style>
